<template>
	<view class="dashboard-page">
		<view class="date-tabs">
			<uni-segmented-control class="section-item" :current="selectValue" :values="items" style-type="text"
				active-color="#007aff" inActiveColor="#000" @clickItem="handleSegmentClick" />
			<uni-data-select v-model="selectValue" placeholder="自定义" :localdata="range"
				@change="handleSelectChange"></uni-data-select>
		</view>

		<view class="section-card">
			<view class="card-item">
				<image class="card-img" src="/static/statistics/收入.png" mode="widthFix"></image>
				<text class="card-text">￥{{incomes}}</text>
				<text class="card-desc">收入</text>
			</view>
			<view class="card-item">
				<image class="card-img" src="/static/statistics/订单.png" mode="widthFix"></image>
				<text class="card-text">{{orders}}</text>
				<text class="card-desc">订单量</text>
			</view>
		</view>

		<view class="echarts">
			<view class="section-ring">
				<text class="section-title">收入分布</text>
				<image class="checkout-btn" src="/static/statistics/切换.png" mode="widthFix" @click="checkoutIncomes">
				</image>
			</view>
			<ring :ringData="incomesData" v-if="incomesSort===0"></ring>
			<coulmn-chart :columnData="incomesData" :data-type="'income'" v-if="incomesSort===1"></coulmn-chart>
		</view>

		<view class="echarts">
			<view class="section-ring">
				<text class="section-title">订单分布</text>
				<image class="checkout-btn" src="/static/statistics/切换.png" mode="widthFix" @click="checkoutOrders">
				</image>
			</view>
			<coulmn-chart :columnData="ordersData" :data-type="'order'" v-if="ordersSort===0"></coulmn-chart>
			<pie :columnData="ordersData" v-if="ordersSort===1"></pie>
		</view>

	</view>
</template>

<script>
	import {
		toValue
	} from "vue";
	import RingChart from "@/components/ring/ring.vue";
	import CoulmnChart from "@/components/coulmn/coulmn.vue"
	import PieChart from "@/components/pie/pie.vue"
	export default {
		components: {
			RingChart,
			CoulmnChart,
			PieChart
		},
		data() {
			return {
				items: ['今日', '昨日'],
				selectValue: 0,
				range: [{
					text: '今日',
					value: 0
				}, {
					text: '昨日',
					value: 1
				}, {
					text: '最近一周',
					value: 2
				}, {
					text: '最近半个月',
					value: 3
				}, {
					text: '最近一个月',
					value: 4
				}, {
					text: '最近三个月',
					value: 5
				}, {
					text: '最近半年',
					value: 6
				},{
					text: '最近一年',
					value: 7
				}],
				incomes: 2066.56,
				orders: 56,
				incomesSort: 0,
				ordersSort: 0,
				/* 给组件传递的数据 */
				incomesData: [{
					text: '维修',
					value: 2306.0
				}, {
					text: '洗车',
					value: 800.0
				}, {
					text: '保养',
					value: 800.0
				}],
				ordersData: [{
					text: '维修',
					value: 66
				}, {
					text: '洗车',
					value: 108
				}, {
					text: '保养',
					value: 26
				}]
			};
		},

		methods: {
			// 处理分段控件点击事件
			handleSegmentClick(e) {
				console.log(e);
				this.selectValue = e.currentIndex;
			},
			// 处理单选框变化事件（可选，若有其他逻辑可在此添加）
			handleSelectChange() {
				// 可根据需要添加单选框变化后的逻辑
			},
			checkoutIncomes() {
				// 切换图表类型
				this.incomesSort = this.incomesSort === 0 ? 1 : 0;
			},
			checkoutOrders() {
				// 切换图表类型
				this.ordersSort = this.ordersSort === 0 ? 1 : 0;
			},
		},
	}
</script>

<style scoped>
	.dashboard-page {
		padding: 20rpx;
		background-color: #fff;
	}

	.date-tabs {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.section-card {
		display: flex;
		justify-content: space-around;
		margin-top: 40rpx;
		margin-bottom: 20rpx;

	}

	.card-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 8rpx;
		padding: 20rpx;
		gap: 10rpx;
	}

	.card-img {
		width: 80rpx;
		height: 80rpx;
	}

	.card-text {
		font-size: 36rpx;
		font-weight: bold;
		margin: 10rpx 0;
	}

	.card-desc {
		font-size: 28rpx;
		color: #666;
	}

	.section-ring {
		display: flex;
		align-items: left;
	}

	.checkout-btn {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		border: none;
		border-radius: 8rpx;
		margin-left: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
	}
	.echarts{
		padding: 16rpx ;
	}
</style>